<template>
  <div class="wo-file-select">
    <template v-for="(item_v, item_k) in 1" :key="item_k">
      <slot :name="'slot' + item_k"></slot>
    </template>
    <input class="wo-file-input" type="file" :accept="fileType" :multiple="multiple" @change="selectFileFunc" />
  </div>
</template>

<script>
import {VueExtend} from 'godspen-lib'

export default {
  mixins: [VueExtend.mixin],
  name: 'FileSelect',
  label: process.env.LABEL,
  style: process.env.STYLE,
  stack: null, // 是否是堆叠模式 ，false：孩子元素会按楼层一个个向下排布， true: 孩子元素绝对定位，随意放置位置
  childLimit: 9999,  // 孩子元素最大限制数
  leaf: false, // 是否是叶子节点，为true的时候该节点下面不能添加节点
  props: {
    fileType: {
      type: String,
      default: 'image/*',
      editor: {
        label: '文件类型',
        desc: '可选择的文件类型',
        type: 'input'
      }
    },
    multiple: {
      type: Boolean,
      default: false,
      editor: {
        label: '允许多选',
        desc: '设置是否允许选择多个文件',
        type: 'checkbox'
      }
    },
  },
  slots: true,
  computed: {
  },
  editorMethods: {
  },
  methods: {
    selectFileFunc (event) {
      console.log('选择文件：', event.target.files)
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus" scoped>
.wo-file-select {
  position: relative;
  width: 100%;
  height: 100%;
}
.wo-file-input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
</style>